﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>21-XCardTest</title>
    <link href="../dist/css/bootstrap.css" rel="stylesheet" />
</head>
<body>
    <script src="../dist/js/jquery.js"></script>
    <script src="../dist/js/popper.js"></script>
    <script src="../dist/js/bootstrap.js"></script>
    <script src="../dist/js/bootstrap-es6.js"></script>
    <script>
        var container = new XContainer({
            container: document.body,
            children: [{
                xtype: 'row',
                children: [{
                    xtype: 'col',
                    children: [{
                        xtype: 'card',
                        width: '400px',
                        children: [{
                            xtype: 'cardimage',
                            src: '../image/eagle.jpg'
                        }, {
                            xtype: 'cardbody',
                            children: [{
                                xtype: 'cardtitle',
                                html: 'Card title'
                            }, {
                                xtype: 'cardtext',
                                html: 'Some quick example text to build on the card title and make up the bulk of the card\'s content.'
                            }, {
                                xtype: 'linkbutton',
                                text: 'Go somewhere',
                                url: '#'
                            }]
                        }]
                    }]
                }, {
                    xtype: 'col',
                    children: [{
                        xtype: 'card',
                        width: '400px',
                        children: [{
                            xtype: 'cardbody',
                            children: [{
                                xtype: 'cardtitle',
                                html: 'Card title'
                            }, {
                                xtype: 'cardsubtitle',
                                html: 'Card subtitle'
                            }, {
                                xtype: 'cardtext',
                                html: 'Some quick example text to build on the card title and make up the bulk of the card\'s content.'
                            }, {
                                xtype: 'cardlink',
                                text: 'Card link',
                                url: '#'
                            }, {
                                xtype: 'cardlink',
                                text: 'Another link'
                            }]
                        }]
                    }]
                }, {
                    xtype: 'col',
                    children: [{
                        xtype: 'card',
                        width: '400px',
                        children: [{
                            xtype: 'cardimage',
                            src: '../image/eagle.jpg'
                        }, {
                            xtype: 'cardbody',
                            children: [{
                                xtype: 'cardtitle',
                                html: 'Card title'
                            }, {
                                xtype: 'cardsubtitle',
                                html: 'Card subtitle'
                            }, {
                                xtype: 'cardtext',
                                html: 'Some quick example text to build on the card title and make up the bulk of the card\'s content.'
                            }]
                        }, {
                            xtype: 'listgroup',
                            cls: 'list-group-flush',
                            children: [{
                                xtype: 'listgroupitem',
                                html: 'Cras justo odio'
                            }, {
                                xtype: 'listgroupitem',
                                html: 'Dapibus ac facilisis in'
                            }, {
                                xtype: 'listgroupitem',
                                html: 'Vestibulum at eros'
                            }]
                        }, {
                            xtype: 'cardbody',
                            children: [{
                                xtype: 'cardlink',
                                text: 'Card link',
                                url: '#'
                            }, {
                                xtype: 'cardlink',
                                text: 'Another link'
                            }]
                        }]
                    }]
                }, {
                    xtype: 'col',
                    children: [{
                        xtype: 'card',
                        children: [{
                            xtype: 'cardheader',
                            html: 'Featured'
                        }, {
                            xtype: 'cardbody',
                            children: [{
                                xtype: 'cardtitle',
                                html: 'Special title treatment'
                            }, {
                                xtype: 'cardtext',
                                html: 'With supporting text below as a natural lead-in to additional content.'
                            }, {
                                xtype: 'linkbutton',
                                text: 'Go somewhere',
                                url: '#'
                            }]
                        }, {
                            xtype: 'cardfooter',
                            html: 'two days ago'
                        }]
                    }]
                }]
            }]
        });
        container.render();
    </script>
</body>
</html>